<template>
  <div class="content-a">
    <div class="left">
      <ul>
        <li
          v-for="(item, index) in nav"
          :key="item.title"
          @click="isShow(index)"
        >
          <span :class="[navIndex == index ? 'active' : '']">{{
            item.title
          }}</span>
        </li>
        <li class="left_tc">
          <div  @click="tcdl">退出登录</div>
        </li>
      </ul>
    </div>
    <div class="right">
      <Equipment v-if="navIndex == 0" />
      <Maintain v-else-if="navIndex == 1" />
      <Settings v-else-if="navIndex == 2" />
      <Homemain v-else />
    </div>
  </div>
</template>
<script>
import Homemain from "@/views/Homemain.vue";
import Equipment from "@/views/Equipment.vue";
import Maintain from "@/views/Maintain.vue";
import Settings from "@/views/Settings.vue";
export default {
  data() {
    return {
      navIndex: -1,
      nav: [
        {
          title: "设备管理",
        },
        {
          title: "系统维护",
        },
        {
          title: "系统设置",
        },
      ],
    };
  },
  components: {
    Homemain,
    Equipment,
    Maintain,
    Settings,
  },
  methods: {
    isShow(index) {
      this.navIndex = index;
      this.$router.push("/home/main?t=" + index);
    },
    tcdl() {
      localStorage.removeItem("login");
      this.$router.push("/login");
    },
  },
  created() {
    this.navIndex = -1;
  },
  watch: {
    $route: function (to) {
      if (to.fullPath == "/home/main") {
        this.navIndex = -1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.content-a {
  margin-top: 20px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  .left {
    padding: 0 35px;
    max-width: 180px;
    min-width: 180px;
    text-align: center;
    ul {
      background: #fbfcfd;
      margin: 0;
      padding: 0;
      li {
        height: 50px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        span {
          position: relative;
        }

        span.active::before {
          content: "";
          display: block;
          width: 4px;
          height: 100%;
          background-color: #15c77a;
          position: absolute;
          top: 0;
          left: -8px;
        }
        &:nth-of-type(3){
          border-bottom: 1px solid #f2f2f2;
        }
      }
    }
    .left_tc {
      cursor: auto;
      max-width: 120px;
      min-width: 120px;
      height: 50px;
      padding: 0px 30px 0px;
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      div {
        cursor: pointer;
        flex: 1;
        padding: 10px 0;
        cursor: pointer;
        font-size: 16px;
        border-radius: 3px;
      }
    }
  }
  .right {
    max-width: 950px;
    min-width: 950px;
  }
}
</style>
